import * as React from 'react';

//useState : 16.8之后提供的api
import {Component, useEffect, useState} from "react";


function Example(props) {

  // count : state里面状态的名字
  // setCount: 修改count的一个函数
  // useState参数 : 默认值
  let [count, setCount] = useState(0);
  let [arr, setArr] = useState(['暴龙兽', '亚古兽', '加鲁鲁兽', '兽人加鲁鲁']);
  let [obj, setObj] = useState({from: 'A', to: 'B', message: '在吗'});
  // setXXX 参数 设置原有数据  设置数组

  // 按照顺序调用的
  useEffect(() => {

    // 操作dom

    console.log('执行useEffect');
    console.log(arr);
    console.log(obj);
    return () => {
      // 第一次不走的  更新之后会走
      console.log('什么时候执行返回的回调')
    };
  });

  useEffect(() => {
    // 操作dom
    document.title = `${count}times`;
    console.log('修改了title');

  });

  useEffect(() => {
    console.log('arr或者 obj 发生改变');
  }, [arr, obj]);

  // 用state
  let {title} = props;
  return (<div>
    <p>{title}</p>
    <p>{count}</p>
    <button onClick={() => setCount(count + 1)}>+</button>
    <button onClick={() => setCount(count - 1)}>-</button>
    <button onClick={() => {
      // arr.push('独角兽');
      // arr.push('天使兽');
      // setArr([...arr]);
      setArr(arr => [...arr, '恶魔兽'])
    }}>修改数组
    </button>
    <button onClick={() => {
      setObj({...obj, message: '不在'})
    }}>修改对象
    </button>

    <ul>
      {arr.map((item, index) => (<li key={index}>
        {item}
      </li>))}
    </ul>

    <h2>消息来自: {obj.from}</h2>
    <h2>{obj.to}</h2>
    <h2>消息内容: {obj.message}</h2>
  </div>)
}


class MyHook extends Component {
  render() {
    return (
      <div>
        <Example title={'你好啊 函数式组件'}/>
      </div>
    );
  }
}

export default MyHook;
